<template>
    <el-radio-group v-model="selected">
        <div class="flex flex-row flex-wrap p-2 gap-x-1 gap-y-3">
            <el-radio v-for="i in 10" :value="i" class="main-container">
                <div class="w-40 text-title hover:text-primary rounded" @dblclick="play"
                    :class="i == selected ? 'text-primary outline outline-4 outline-success shadow-lg shadow-success' : ''">
                    <Poster type="movie" :tags="['林青霞', '港片经典']"
                        src="https://img1.baidu.com/it/u=2049364445,2174721833&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=759" />
                    <div class="px-1 truncate cursor-pointer" :class="i == selected ? 'text-primary' : ''">
                        {{ "东方不败之风云再起" + i }}
                    </div>
                </div>
            </el-radio>
        </div>
    </el-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
const selected = ref()

const play = () => {
    router.push({
        name: 'Audio Player',
        params: { id: selected.value }
    })
}
</script>

<style scoped>
:deep(.main-container.el-radio) {
    height: min-content;
    margin-right: 0;
}

:deep(.main-container .el-radio__input) {
    display: none;
}
</style>